<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        .main-container {
            background: #fff;
            font-size: 14px;
        }
        .wrapper {
            width: 100%;
            min-height: 100%;
            height: auto;
        }
        .wrap {
            padding-bottom: 1px;
            padding-top: 50px;
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        .layout {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            background-color: #fff;
            position: relative;
            padding: 0 20px 30px;
            min-height: 500px;
            width: 600px;
            display: inline-block;
        }
        .device-frame {
            padding-bottom: 30px;
        }
        .n-frame {
            background: #fff;
            width: 400px;
            margin: 0 auto;
            font-size: 14px;
            text-align: initial;
        }
        .n-frame form{
            width: 400px;
            height: 300px;
        }
        .regbox {
            width: 360px;
            height: 86px;
            font-size: 14px;
            padding: 0 20px;
            box-sizing: border-box;
        }
        h5.n_tit_msg {
            text-align: center;
            padding: 30px 0;        
            font-weight: normal;
            font-size: 20px;
            color: #03234c;
            line-height: 24px;
        }   
        .n_tit_msg>* {
            display: inline-block;
            vertical-align: middle;
        }
        .n_tit_msg>img {
            height: 24px;
            width: auto;
            margin-left: 8px;
        }
        .inputbg{
            padding-bottom: 15px;
            width: 360px;
            height: 57px;
        }
        .labelbox, .input_bg {
            background: #fff;
            display: block;
            border: 1px solid rgba(0, 0, 0, 0.3);
            height: 42px;
            width: 360px;
        }
        .labelbox input, .input_bg input {
            width: 100% !important;
            padding: 5px 10px;
            line-height: 30px;
            display: block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .wrapper input {
            background: none;
            border: 0 none;
        }
        .labelbox-captcha{
            width: 240px;
            float: left;
        }
        .chkcode_img {
            margin-left: 7px;
            display: block;
            width: auto;
            float: right;
        }   
        .labelbox-agree {
            border: 0;
        }
        .labelbox.labelbox-agree input {
            display: inline-block;
            vertical-align: middle;
            padding: 0;
            line-height: initial;
            width: auto !important;
        }
        .labelbox.labelbox-agree a {
            color: #999;
        }
        .fixed_bot {
            padding-bottom: 10px;
            margin: 0;
            padding: 0;
        }
        .wrapper .btn_reg_1 {
            background-color: #03234c;
            margin-top: 15px;
            border: 1px solid #03234c;
            color: #fff;
        }
        .wrapper .btn332 {
            width: 360px;
            margin: 0 auto;
            line-height: normal;
            padding: 10px 0;
            text-align: center;
            font-size: 16px;
            display: block;
            /* border: 1px solid #e8e8e8; */
        }
        .go-login {
            text-align: center;
            margin-top: 50px;
            display: block;
            align-items: center;
        }
        .go-login a {
            color: #999;
            display: block;
        }


    </style>
</head>
<body>
    <div class="main-container J_minicart_close">
        <div class="wrapper">
            <div class="wrap">
                <div class="layout">
                    <div class="n-frame device-frame reg_frame" id="first_container">
                        <form action method="POST" id="reg_form" data-type="mobile">
                            <div class="regbox">
                                <h5 class="n_tit_msg">
                                    <span>欢迎加入</span>
                                    <img src="/JS-project/src/images/logo.png" alt>
                                </h5>
                                <div class="inputbg">
                                    <!-- 错误添加class为err_label -->
                                    <label class="labelbox labelbox-user" for="user">
                                        <input type="text" name="username" id="user" autocomplete="off" placeholder="手机号码">
                                    </label>
                                </div>
                                <div class="inputbg ipt_verity_e_pwd" style="display: none;">
                                    <!-- 密码选框，暂无 -->
                                </div>
                                <div class="inputbg inputcode dis_box" id="captcha">
                                    <label class="labelbox labelbox-captcha" for>
                                        <input class="code" id="label-captcha" name="vcode" maxlength="4" placeholder="请输入验证码" autocomplete="off" type="text">
                                    </label>
                                    <img id="captcha-img" class="chkcode_img icode_img icode_image code_image" src="" alt="验证码" title="看不清楚，换一张">
                                </div>
                                <!-- 隐藏政策 -->
                                <div class="inputbg" id="agree">
                                    <label class="labelbox labelbox-agree" >
                                        <input type="checkbox" name="agree" id="agree-check">
                                        "我已充分阅读、理解并接受"
                                        <a href="#" onclick="showAgreement(true);">隐藏政策</a>
                                        "的全部内容"
                                    </label>
                                </div>
                                <div class="err_tip error-tip-2" id="error-outcon" style="display: none;"></div>
                                <!-- 注册报错选框，暂无 -->
                                <div class="fixed_bot">
                                    <input class="btn332 btn_reg_1" type="submit" id="submit_button" value="确认">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="n-frame device-frame reg_frame" id="next_container" style="display: none;">
                        <!-- 隐藏的手机短信验证码注册框，暂无 -->                
                    </div>
                    <p class="go-login">
                        <a href="#">已是会员？立即注册</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>